<template>
    <div class="goods">
        <div class="menu-wrapper" ref="meunweapper">
            <ul>
                <li v-for="(item, index) in goods" :key="index" class="menu-item" :class="{'current':currentIndex==index}" @click="selectMenu(index,$event)">
                    <span class="text border-1px">
                        <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodswrapper">
            <ul>
                <li v-for="(item, index) in goods" :key="index" class="food-list food-list-hook">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li v-for="(food, i) in item.foods" :key="i" class="food-item border-1px">
                            <div class="icon">
                                <img width="57" height="57" :src="food.icon" alt="">
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span>
                                    <span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="now">{{food.price}}</span>
                                    <span class="old" v-show="food.oldPrice">{{food.oldPrice}}</span>
                                </div>
                                <div class="cartcontrol--wrapper">
                                    <cartcontrol :food="food"></cartcontrol>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <shopcart :deliveryprice="seller.deliveryPrice" :minprie="seller.minPrice"></shopcart>
    </div>
</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
//引入购物车组件
import shopcart from "../shopcart/shopcart.vue"
import cartcontrol from "../cartcontrol/cartcontrol.vue"

export default {
    props:{
        seller:{
            type:Object
        }
    },
    data() {
        return {
            goods:[],
            listHeight:[],
            scrollY:0,
            classMap:[]
        }
    },
    created() {
        this.classMap=['description','discount','special','invoice','guarantee']
        this.$http.get('http://cspc.cqmbyy.cn/api/goods/').then((lefgg) => {
            this.goods=lefgg.body;
            this.$nextTick(()=>{
                this._initScroll();
                this._calculateHeight()
                console.log(this.listHeight)
            })
        })
    },
    computed:{
        currentIndex(){
            for (let i = 0; i < this.listHeight.length; i++) {
                let height = this.listHeight[i];
                let height2 = this.listHeight[i+1];
                if(!height2 || (this.scrollY >= height && this.scrollY < height2)){
                    return i;
                }
            }
            return 0;
        }
    },
    methods: {
        _initScroll(){    
            this.meunScroll=new BScroll(this.$refs.meunweapper,{
                click:true
            });

            this.foodsScroll=new BScroll(this.$refs.foodswrapper,{
                click:true,
                probeType:3
            });
            this.foodsScroll.on('scroll',(pos)=>{
                this.scrollY = Math.abs(Math.round(pos.y));
            })
        },
        _calculateHeight(){
            let foodList=this.$refs.foodswrapper.getElementsByClassName('food-list-hook');
            let height=0;
            this.listHeight.push(height);
            for (let i = 0; i < foodList.length; i++) {
                let item=foodList[i];
                height+= item.clientHeight;
                this.listHeight.push(height);
            }
        },
        selectMenu(index,event) {
            if(!event._constructed){
                return ;
            }
            let foodList =this.$refs.foodswrapper.getElementsByClassName('food-list-hook');
            let el = foodList[index];
            this.foodsScroll.scrollToElement(el ,300);
        }
    },
    mounted() {
        //console.log(this.$refs.foodswrapper)
    },
    components:{
        shopcart,
        cartcontrol
    }
 }
</script>
<style lang="stylus">
@import "../../common/stylus/mixin.styl"
.goods
    display:flex
    position: absolute
    top:185px
    bottom: 46px
    width: 100%
    overflow: hidden
    .menu-wrapper
        flex:0 0 80px
        width: 80px
        background :#f3f5f7
        .menu-item
            display: table
            height: 54px
            width: 56px
            line-height: 14px
            padding:0 12px
            &.current
                position: relative
                background:#fff
                font-weight: 700
                z-index: 10
                margin-top: -1px
                .text
                    border-none()
            .icon
                display: inline-block
                vertical-align top
                width: 12px
                height: 12px
                margin-left: 2px
                background-size:12px 12px
                background-repeat: no-repeat
                &.description
                    bg-image('decrease_3')
                &.discount
                    bg-image('discount_3')
                &.guarantee
                    bg-image('guarantee_3')
                &.invoice
                    bg-image('invoice_3')
                &.special
                    bg-image('special_3')
            .text
                display:table-cell
                font-size:12px
                vertical-align:middle
                width: 56px
                border-1px(rgba(7,17,27,0.1))
    .foods-wrapper
        flex:1
        .title
            padding-left:14px
            height: 26px
            line-height: 26px
            border-left:2px solid #d9dde1
            font-size :12px
            color: rgb(147,153,159)
            background:#f3f7f5
        .food-item
            display:flex
            margin: 18px
            padding-bottom: 18px
            border-1px(rgba(7,17,27,0.1))
            &:last-child
                border-none()
                margin-bottom:0
            .icon
                flex: 0 0 57px
                margin-right: 10px
            .content
                flex: 1
            .name
                margin: 2px 0 8px 0
                height: 14px
                line-height: 14px
                font-size: 14px
                color: grb(7, 17 ,27)
            .desc, .extra
                line-height: 10px
                font-size: 10px
                color: rgb(147,153,159)
            .desc
                line-height:20px
            .extra
                .count
                    margin-right: 10px
            .price
                font-weight: 700
                line-height:24px
                .now
                    margin-right:8px
                    font-size: 14px
                    color:rgb(240,20,20)
                .old
                    text-decoration:line-through
                    font-size: 10px
                    color:rgb(147,153,159)
            .cartcontrol--wrapper
                position:absolute
                right: 0
                bottom :0
</style>

